import React, {Component,Fragment} from 'React';
import './index.css'
import ClassifyItem from './ClassifyItem';
import axios from 'axios'
export default class Classify extends Component{
    constructor(props){
        super(props);
        this.state={}
    }
    componentWillMount(){
        axios({
            url:'../../../public/classify.json',
            method:'get'
        }).then(res=>{
            this.setState(res.data)
        })
    }
    show(value){
        if(JSON.stringify(this.state)!='{}'){
        //    console.log(this.state[value])
        return this.state[value].map((item,index)=>{
            return (
                <div key={index}>
                    <ClassifyItem
                    title={this.state[value][index].title}
                    items={this.state[value][index].items}
                    />
                </div>
            )
            // console.log(this.state[value][index].title)
        })
        }
    }
    render(){
        return(
            <Fragment>
                <div className='classify'>
                    <h3 className='goods-title'>商品分类</h3>
                    <ul className='classify'>
                        <li>女装
                            <div className='male-cloth'>
                                {this.show('female')}
                            </div>
                        </li>
                        <li>男装
                            <div className='female-cloth'>
                                {this.show('male')}
                            </div>
                        </li>
                        <li>鞋靴
                            <div className='shoes'>
                                {this.show('shoes')}
                            </div>
                        </li>
                        <li>家电
                            <div className='appliance'>
                                {this.show('appliance')}
                            </div>
                        </li>
                        <li>办公
                            <div className='office'>
                                {this.show('office')}
                            </div>
                        </li>
                        <li>箱包
                            <div className='bags'>
                            {this.show('bags')}
                            </div>
                        </li>
                        <li>美妆
                            <div className='beauty'>
                            {this.show('beauty')}
                            </div>
                        </li>
                        <li>珠宝
                            <div className='jewelry'>
                                {this.show('jewelry')}
                            </div>
                        </li>
                    </ul>
                </div>
            </Fragment>
        )
    }
}